<template>
	<view class="userInfomation">
		<view class="user" @click="gotoPage('user')" v-if="user">
			<image class="image" src="../../static/member.png" mode="aspectFill"></image>
			<span class="id">{{user.user_name}}</span>
			<span class="right-arrow">&gt;</span>
		</view>
		<view class="user" v-else>
			<image class="image" src="../../static/member.png" mode="aspectFill"></image>
			<span class="id">{{"登录后显示"}}</span>
		</view>

		<view v-if="user && user.user_role === 2" class="first-menu">
			<view class="buyandsell">
				<view class="buy" @click="gotoPage('buy')">
					<view>{{allData.buy}}</view>
					<view>已购买</view>
				</view>
				<view class="sell" @click="gotoPage('sell')">
					<view>{{allData.sell}}</view>
					<view>已售出</view>
				</view>
				<view class="follow" @click="gotoPage('follow')">
					<view>{{allData.follow}}</view>
					<view>关注</view>
				</view>
				<view class="history" @click="gotoPage('history')">
					<view>{{allData.history}}</view>
					<view>历史记录</view>
				</view>
			</view>
			<rowTextEnter :data="rowTextEnter"></rowTextEnter>
		</view>

		<view class="manager" v-if="user.user_role === 0">
			<rowTextEnter :data="superManager"></rowTextEnter>
		</view>
		
		<view class="manager" v-if="user.user_role === 1">
			<rowTextEnter :data="manager"></rowTextEnter>
		</view>

		<view class="sign-out">
			<rowTextEnter :data="signOut" v-if="user"></rowTextEnter>
			<rowTextEnter :data="signIn" v-else></rowTextEnter>
		</view>

		<view class="info" v-if="user.user_role === 2">
			<rowTextEnter :data="info"></rowTextEnter>
		</view>

		<view class="notice" @click="notice" v-if="user && user.user_role == 2">
			<image src="../../static/message.png" mode="aspectFill" class="img"></image>
			<span class="red" v-if="allData.trading != 0">{{allData.trading}}</span>
		</view>
	</view>
</template>

<script>
	import {
		myRequest
	} from "@/util/api.js"
	import rowTextEnter from "../components/rowTextEnter/rowTextEnter.vue"
	export default {
		data() {
			return {
				user: {},
				rowTextEnter: [{
						text: "在这里已经赚了：￥123",
						url: "../userHomePage/userHomePage"
					},
					// {
					// 	text: "历史记录",
					// 	url: "../historyList/historyList"
					// },
					// {
					// 	text: "我关注的商品",
					// 	url: "../myFollow/myFollow"
					// }
				],
				superManager: [{
						text: "全部商品",
						url: "../allProduct/allProduct"
					},
					{
						text: "用户权限修改",
						url: "../manageUser/manageUser"
					}
				],
				manager: [{
						text: "全部商品",
						url: "../allProduct/allProduct"
					}
				],
				signOut: [{
					text: "注销",
					url: "signOut"
				}],
				signIn: [{
					text: "登录",
					url: "../sign/signIn/signIn"
				}],
				info: [{
					text: "帮助与支持",
					url: "../about/about"
				}, {
					text: "使用规约",
					url: "../about/about"
				}, {
					text: "问题反馈",
					url: "../about/about"
				}, {
					text: "商务合作",
					url: "../about/about"
				}, {
					text: "关于我们",
					url: "../about/about"
				}, ],
				sellItem: [],
				buyItem: [],
				historyList: [],
				tradingProduct: [],
				myFollow: [],
				allData: {
					"buy": 2,
					"sell": 0,
					"follow": 0,
					"history": 0,
					"trading": 0,
					"price": 0
				}
			}
		},
		components: {
			rowTextEnter
		},
		methods: {
			gotoPage(page) {
				let url;
				if (page == "buy") {
					url = "../buyItem/buyItem"
				} else if (page == "sell") {
					url = "../sellItem/sellItem"
				} else if (page == "history") {
					url = "../historyList/historyList"
				} else if (page == "user") {
					url = "../editUser/editUser"
				} else if (page == "follow") {
					url = "../myFollow/myFollow"
				}
				uni.navigateTo({
					url
				})
			},
			async getUserInfoNum() {
				const res = await myRequest({
					url: "/api/getUserInfoNum/",
					method: "POST",
					data: {
						id: this.user.user_id
					}
				})
				this.allData = res.data.message;
				this.rowTextEnter[0].text = "在这里已经赚了：￥" + this.allData.price;
				// console.log(res)
			},
			notice() {
				uni.navigateTo({
					url: "../tradingProduct/tradingProduct"
				})
			}
		},
		mounted() {

		},
		onShow() {
			this.user = this.$getUser();
			if (this.user && this.user.user_role == 2) {
				this.getUserInfoNum();
			}
		}
	}
</script>

<style scoped lang="scss">
	.userInfomation {
		// margin: 30rpx 0;

		.user {
			padding: 30rpx 80rpx;
			height: 200rpx;
			line-height: 200rpx;
			position: relative;
			top: 0;
			font-size: 60rpx;
			background-color: #FFFFFF;

			.right-arrow {
				position: absolute;
				right: 8%;
				text-align: right;
				font-size: 40rpx;
			}

			.id {
				position: absolute;
				left: 40%;
			}

			.image {
				position: absolute;
				top: 50%;
				// right: 20%;
				width: 150rpx;
				height: 150rpx;
				transform: translate(0%, -50%);
			}
		}


		.first-menu {
			margin-top: 40rpx;
		}

		.buyandsell {
			margin: 50rpx 0;
			display: flex;
			text-align: center;

			.buy {
				flex-grow: 1;
			}

			.sell {
				flex-grow: 1;
			}

			.follow {
				flex-grow: 1;
			}

			.history {
				flex-grow: 1;
			}
		}

		.manager {
			margin-top: 50rpx;
		}

		.sign-out {
			margin-top: 50rpx;
		}

		.info {
			margin-top: 50rpx;
		}

		.notice {
			position: absolute;
			// #ifdef MP-WEIXIN
			top: 25rpx;
			right: 25rpx;
			// #endif
			// #ifdef H5
			top: -66rpx;
			right: 3%;
			// #endif

			.img {
				width: 24px;
				height: 24px;
				z-index: 999;
			}

			.red {
				position: absolute;
				top: -20%;
				right: -25%;
				background-color: #f30004;
				color: #FFFFFF;
				z-index: 999;
				font-size: 12px;
				width: 30rpx;
				height: 30rpx;
				line-height: 30rpx;
				border: 1px solid #f30004;
				border-radius: 100rpx;
				text-align: center;
			}
		}
	}
</style>
